<template>
  <div>
    <a-row>
      <a-col :span="4" style="background-color: white;height: 95vh;">
        <div @click="showModal">
          <a-button type="dashed" style="width: 99%;margin: 3px;">
            <template #icon>
              <plus-outlined/>
            </template>
            添加表单
          </a-button>
        </div>
        <div class="form-list-content" style="overflow-y: auto;height: 90vh;">
          <div v-for="form in formList" :key="form.id" class="form-list"
               :class="{'form-select' :currentFormId === form.id}"
               @click="selectForm(form.id)">
            <a-row>
              <a-col :span="22"><span style="margin-left: 5px;">{{ form.formName }}</span></a-col>
              <a-col :span="2" style="align-content: center;">
                <a-dropdown trigger="[click]">
                  <a class="ant-dropdown-link" @click.prevent>
                    <setting-outlined style="color: #1890ff;"/>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a @click="editForm(form.id)">编辑</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a @click="deleteForm(form.id)">删除</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;">数据字典</a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
      <a-col :span="20" style="height: 95vh;padding: 5px;background-color: #f0f2f5;">
        <div style="background-color: white;height: 97%;">
          <a-col :span="24" style="background-color: white;margin-bottom: 5px;text-align: center;">
            <span><h2>{{ this.formData.formBean.formName }}</h2></span>
          </a-col>
          <div style="margin-left: 7px;padding: 5px;"
               v-for="(viewItem,index1) in this.formData.formBean.viewBean.viewItemList">
            <div v-if="viewItem.showType === showType.mainTable">
              <a-divider orientation="left" orientation-margin="0px">
                <a-tag color="#2db7f5">{{ viewItem.refObj.name }}</a-tag>
              </a-divider>
              <table style="width: 100%;table-layout: fixed">
                <tr v-for="(item,lineNum) in viewItem.refObj.line">
                  <td v-for="(element,rowNum) in viewItem.refObj.row"
                      :id="this.getTableColId(viewItem,lineNum,rowNum)"
                      style="border: 1px solid rgba(218,216,216,0.75);">
                    <def-field :formField=this.getBindData(viewItem,lineNum,rowNum) :ext="{disabled: true}"></def-field>
                  </td>
                </tr>
              </table>
            </div>

            <def-field v-if="viewItem.showType === showType.field" :formField=this.getBindData(viewItem)
                       :ext="{disabled: true}"></def-field>
          </div>
        </div>
        <sapn v-for="(view,index1) in this.formData.formBean.viewList">
          <a-button> {{ view.viewName }}</a-button>
        </sapn>
      </a-col>
    </a-row>

    <a-modal v-model:visible="visible" title="添加表单" @ok="handleOk">
      <template>
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          保存
        </a-button>
      </template>
      <a-input v-model:value="appForm.formName"/>
    </a-modal>
  </div>
</template>

<script>
import {AppFormApi} from "@/components/home/lowCode/appDef/js/AppFormApi";
import DefField from "@/components/home/lowCode/appDef/form/DefField";

const showType = {
  field: 'field', mainTable: 'mainTable'
}

export default {
  name: "FormManager",
  components: {
    DefField,
  },
  data() {
    return {
      showType,
      formLoading: false,
      formList: [],
      currentFormId: '',
      mainFields: [],
      loading: false,
      visible: false,
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      appId: '',
      appName: '',
      formData: {
        fieldIndex: 0,
        selectFormField: {},
        formBean: {
          id: '', formName: '', dbTableName: '',
          mainTableBean: {fieldList: []},
          viewBean: {
            viewItemList: []
          },
        }
      },
      appForm: {
        appId: '',
        formName: '',
      }
    }
  },
  created() {
    this.appId = this.$route.query.appId;
    this.appName = this.$route.query.appName;
    this.loadFormList();
    window.addEventListener("storage", e => {
      if (e.key === "refreshFormList") {
        this.loadFormList();
      }
    })
  },
  methods: {
    /**
     * 获取视图绑定的字段信息
     *
     * @param viewItem
     * @param lineNum
     * @param rowNum
     * @returns {{}}
     */
    getBindData: function (viewItem, lineNum, rowNum) {
      let fieldData = {};
      if (viewItem.showType === showType.field) {
        fieldData = this.formData.formBean.fieldMap[viewItem.refObj.id];
      } else if (viewItem.showType === showType.mainTable) {
        if (viewItem && viewItem.refObj) {
          let dbFieName = viewItem.refObj.tableContent[this.getTableColId(viewItem, lineNum, rowNum)];
          fieldData = this.formData.formBean.fieldMap[dbFieName];
        }
      }
      return fieldData;
    },
    getTableColId(viewItem, lineNum, rowNum) {
      return 'tab' + viewItem.refObj.id + '_line' + lineNum + '_row' + rowNum;
    },
    getCurrentViewData() {
      return this.formData.formBean.viewBean;
    },
    editForm(formId) {
      let routeUrl = this.$router.resolve({
        path: "/app_def/defForm",
        query: {formId: formId}
      });
      window.open(routeUrl.href, "_blank");
    },
    selectForm(formId) {
      this.currentFormId = formId;
      this.loadFormDef(formId)
    },
    addMainField() {
      this.mainFields.push({});
    },
    deleteForm(formId) {
      AppFormApi.deleteById(formId).then(() => {
        this.loadFormList();
      }, msg => {
        this.$message.warning(msg);
      })
    },
    callback(key) {
      console.log(key);
    },
    loadFormList() {
      AppFormApi.getByAppId(this.appId).then((data) => {
        this.formList = data;
        if (this.formList.length > 0) {
          this.selectForm(this.formList[0].id)
        }
      })
    },
    loadFormDef(formId) {
      this.formLoading = true;
      AppFormApi.getFormBean(formId).then(res => {
        this.formData.formBean = res;
        this.formLoading = false;
      })
    },
    showModal() {
      this.appForm.id = '';
      this.appForm.formName = '';
      this.visible = true;
    },
    handleOk() {
      this.loading = true;
      this.appForm.appId = this.appId;
      AppFormApi.save(this.appForm).then(() => {
            this.loadFormList();
            this.visible = false;
            this.loading = false;
          }, message => {
            this.$message.warning(message);
          }
      )
    },
    handleCancel() {
      this.visible = false;
    }
  }
}
</script>

<style scoped>
.form-list {
  cursor: pointer;
  margin: 5px;
  padding: 5px;
}

.form-select {
  background-color: #82b1ff;
}

.form-list-content::-webkit-scrollbar {
  width: 2px;
}

.form_field {
  padding: 15px;
  margin-top: 10px;
  height: 60px;
  width: 100%;
}

.form_field_title {
  margin: 15px;
  width: 96%;
}


.field_components {
  background-color: #f5f5f5;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}

.field_title {
  font-size: 10px;
}

.form_field_default {
  border: 3px solid #18aeff;
  margin-top: 5px;
}

.form_field {
  padding: 5px;
  margin-top: 7px;
  height: 60px;
  width: 100%;
}

.form_field_title {
  margin: 15px;
  width: 96%;
}

.form_field_checked {
  border: 3px solid #18aeff;
}

.select {
  background-color: #18aeff;
}

.form_item {
  width: 100vh;
  margin-top: 5px;
}

</style>
